<template>
	<div style="height:100%;">
		<div class="tableTittle" v-if="flag !='look'">
			<div><span class="fontImpact">2</span><span>校准列表</span></div>
		</div>
		<div class="penalrow selectw100" v-if="flag =='look'">
			<div class="inlineblock verticalmiddle infoitem">
				<div class="inlineblock verticalmiddle">
					开始日期
				</div>
				<div class="inlineblock verticalmiddle informationItem">
					<el-date-picker size="mini" v-model="demand.bTime" type="date" placeholder="选择起始日期" format="yyyy - MM - dd" value-format="yyyy-MM-dd"
					 style="width:100%;" @change="doSearch">
					</el-date-picker>
				</div>
			</div>
			<div class="inlineblock verticalmiddle infoitem">
				<div class="inlineblock verticalmiddle">
					结束日期
				</div>
				<div class="inlineblock verticalmiddle informationItem">
					<el-date-picker size="mini" v-model="demand.eTime" type="date" placeholder="选择结束日期" format="yyyy - MM - dd" value-format="yyyy-MM-dd"
					 style="width:100%;" @change="doSearch">
					</el-date-picker>
				</div>
			</div>
			<el-button type="warning" size="mini" @click="doSearch" class="searchIcon">搜索</el-button>
		</div>
		<div style="height:calc(100% - 40px);">
			<el-table :data="tableData" style="width: 100%;height:calc(100% - 40px)" class="tableCon" size="mini" key="tableData">
				<el-table-column label="序号" min-width="50px">
					<template slot-scope="scope">
						{{scope.$index+1}}
					</template>
				</el-table-column>
				<el-table-column property="confirmManName" label="确认人" v-if="flag != 'edit'" key="executor" min-width="100px">
				</el-table-column>
				<el-table-column property="executorName" label="检定校准人" min-width="100px" show-overflow-tooltip>
				</el-table-column>
				<el-table-column property="planName" label="计划名称" min-width="100px" show-overflow-tooltip>
				</el-table-column>
				<el-table-column property="status" label="状态" min-width="100px" :formatter="formatterStatus">

				</el-table-column>
				<el-table-column property="executeDate" label="检定日期" v-if="flag != 'edit'" key="executeDate" min-width="140px">
					<template slot-scope="scope">
						{{scope.row.hasOwnProperty('executeDate')?scope.row.executeDate.split(' ')[0]:'---'}}
					</template>
				</el-table-column>
				<el-table-column property="createTime" key="date" label="创建日期" min-width="145px">
					<template slot-scope="scope">
						{{scope.row.hasOwnProperty('createTime')?scope.row.createTime.split('.')[0]:'---'}}
					</template>
				</el-table-column>
				<el-table-column label="操作" v-if="flag == 'edit' " key="opernate" min-width="70px">
					<template slot-scope="scope">
						<el-button size="mini" @click="tjjdcltcc('shenhe',scope)" type="text" v-if="scope.row.isApprove">审核</el-button>
						<el-button type="text" size="mini" @click="tjjdcltcc('edit',scope)" v-if="(scope.row.status == '301' || scope.row.status == '4') && $parent.userOpernation.update.display" :disabled = "!scope.row.display">执行</el-button>
						<el-button type="text" size="mini" @click="tjjdcltcc('look',scope)" v-if="scope.row.status != '301'  && $parent.userOpernation.select.display">详情</el-button>
					</template>
				</el-table-column>
				<el-table-column label="操作" v-if="flag == 'look'" key="opernate1" min-width="70px">
					<template slot-scope="scope">
						<!--isApprove-->
            <el-button type="text" size="mini" @click="giveUp(scope.row)" v-if="(scope.row.status == '301' || scope.row.status == '302') && $parent.$parent.$parent.$parent.userOpernation.giveup.display">废弃</el-button>
						<el-button size="mini" type="text" @click="tjjdcltcc('look',scope)">详情</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="block changepages" v-if="flag == 'look'">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="readQuery.page" :page-sizes="[20, 30, 40]"
				 :page-size="readQuery.pageCount" layout="total, sizes, prev, pager, next, jumper" :total="rowNumber">
				</el-pagination>
			</div>
		</div>
		<div v-if="tianjiajiandingjiluShow">
			<tianjiajiandingjilu :flag="tianjiajiandingjiluFlag" :rowData.sync="rowData" :checkRecordData = "checkRecordData"></tianjiajiandingjilu>
		</div>
	</div>
</template>

<script>
	import { mapState } from 'vuex'
	import tianjiajiandingjilu from './page/tianjiajiandingjilu.vue'
	export default {
		components: {
			tianjiajiandingjilu
		},
		props: { checkRecordData: Object, flag: String },
		data() {
			return {
				rowData: {},
				tianjiajiandingjiluShow: false,
				jiandingshenpiFlag: '',
				tableData: [],
				pageinfo: {},
				equipmentId: '',
				statu: '',
				demand: {
					equipmentId: '',
					maintainType: 'MA02',
					bTime: '',
					eTime: '',
					status: 301
				},
				// <!--待校准 301
				// 		待审核 302
				// 		已校准 303
				// 		已废弃 5
				// 		已驳回 4
				// 		-->
				statusOptions: [
					{
						label: '待校准',
						value: 301
					},
					{
						label: '待审核',
						value: 302
					},
					{
						label: '已校准',
						value: 303
					},
					{
						label: '已废弃',
						value: 5
					},
					{
						label: '已驳回',
						value: 4
					}
				],
				readQuery: {
					page: 1,
					pageCount: 20,
				},
				rowNumber: 0,
			}
		},
		computed: {
			...mapState(['daibanItem', 'daibanItemShow']),
			tabDivHeight() {
				return (window.innerHeight - 460)
			}
		},
		created() {
			if (this.daibanItemShow) {
				this.tjjdcltcc('shenhe', { row: this.daibanItem })
				this.$store.commit('passDaibanItemShow', false)
			}

		},
		mounted() {
			console.log(this.checkRecordData)
			this.checkRecordData.equipmentId = this.checkRecordData.equipmentId
			this.init()
		},
		watch: {
			readQuery: {
				handler(val, oldVal) {
					this.init()
				},
				deep: true
			},
			daibanItem(newer, older) {
				if (this.daibanItemShow) {
					this.tjjdcltcc('shenhe', { row: this.daibanItem })
					this.$store.commit('passDaibanItemShow', false)
				}
			},
		},
		//参数：id：记录id      6229ef19497d4676a2d0ef1d6c0bf543
		methods: {
			formatterStatus(row, column, cellValue) {
				return this.util.changeStatus({ cellValue: cellValue, list: this.statusOptions })
			},
			doSearch() {
				this.readQuery.page = 1;
				this.init()
			},
			//  url: readMaintenanceRecord.htm
			//参数：id：记录id      6229ef19497d4676a2d0ef1d6c0bf543
			readMaintenanceRecord(id) {
				return new Promise((resolve, reject) => {
					this.$http({
						apiUrl: 'resource/readMaintenanceRecord.htm',
						method: 'post',
						params: { id: id },
						isJson: false
					}).then(res => {
						if (res.code === 0) {
							resolve(res)
						}
					})
				})
			},
      giveUp(row){
        // /giveupMaintenRecord.htm
        this.$confirm('是否废弃', '提示', {
        	confirmButtonText: '确定',
        	cancelButtonText: '取消',
        	type: 'warning'
        }).then(() => {
          this.$http({
          	apiUrl: 'resource/giveupMaintenRecord.htm',
          	method: 'post',
          	params: row,
          	isJson: true
          }).then(res => {
          	if (res.code === 0) {
                this.$notify({
                	type:"warning",
                	title:"警告",
                	message:"废弃成功",
                })
                this.init()
          	}
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });


      },
			tjjdcltcc(flag, scope) {
				if (!!scope) {

					this.readMaintenanceRecord(scope.row.id).then(res => {

						this.rowData = res.data
						this.rowData.id = scope.row.id
						this.rowData.fRef = scope.row.fRef
						this.rowData.equipment = this.checkRecordData.equipmentId,

						this.tianjiajiandingjiluShow = true;
						this.tianjiajiandingjiluFlag = flag;
						console.log(this.rowData)
					})
				} else {
					this.rowData = {
						"fRef": scope.row.fRef,
						"id": '',
						"executeDate": this.util.date(),
						"executor": "",
						"equipment": this.checkRecordData.equipmentId,
						"maintainType": "MA02",
						"expiryDate": "",
						"remark": "",
						"checkUnit":"",
						"files": ""
					}
					this.tianjiajiandingjiluShow = true;
					this.tianjiajiandingjiluFlag = flag;
				}
			},
			init() {

				let url;
				if (this.flag == 'look') {
					url = 'resource/getMaintenanceRecordList.htm'
					this.demand.equipmentId = this.checkRecordData.id
					this.demand.page = this.readQuery.page
					this.demand.pageCount = this.readQuery.pageCount
				} else {
					url = 'resource/readMaintenanceListed.htm'
					if(this.checkRecordData.equipmentId == undefined){
						return;
					}else{
						this.demand.equipmentId = this.checkRecordData.equipmentId

					}

				}
				this.$http({
					apiUrl: url,
					method: 'post',
					params: this.demand,
				}).then(res => {
					if (res.code === 0) {
						this.tableData = res.data
						this.pageinfo = res.pageinfo
						if (this.flag == 'look') {
							if (!res.pageinfo) {
								this.rowNumber = 0;
							} else if (res.pageinfo && !res.pageinfo.rowNumber) {
								this.rowNumber = 0;
							} else {
								this.rowNumber = res.pageinfo.rowNumber;
							}
						}
					}
				})
			},
			exports() {
        let token = sessionStorage.getItem('loginAccount')?sessionStorage.getItem('loginAccount'):undefined
				window.open(process.env.baseUrl + 'resource/readMaintenanceListedExcelOut.htm?maintainType=MA02&bTime=&eTime&equipmentId=' + this.checkRecordData.id + "&token=" + token)

			},
			handleSizeChange(val) {
				this.readQuery.pageCount = val;
			},
			handleCurrentChange(val) {
				this.readQuery.page = val;
			},
		}
	}

</script>

<style>

</style>
